<template>
    <div class="container">
        <div class="icon">
            <img :src="icon" alt="">
        </div>
        <div class="title" :style="{'font-size':size+'rem'}">
            {{title}}
        </div>
    </div>
</template>
<script>
export default {
    name: "NavItem",
    props:{
        title: {
            type: String,
            default: 'a'
        },
        icon: {
            type: String,
            default: ''
        },
        selectColor:{
            type: String,
            default: '#000'
        },
        color: {
            type: String,
            default: '#fff'
        },
        selectIcon:{
            type: String,
            default: ''
        },
        icon: {
            type: String,
            default: ''
        },
        size: {
            type: Number,
            default:1.2
        }
    }
}
</script>
<style lang="less" scoped>
.container{
    display: flex;
    height: 4.8125rem;
    width: 100%;
    flex-direction: column;
    .icon{
        display: flex;
        flex: 1
    }
    .title{
        display: flex;
        justify-content: center;
    }
}
</style>
